<style lang="scss">

$nav-height: 40px;
.de-modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  //background-color: rgba(0,0,0,.5);
  //display: flex;
  //align-items: center;
  //justify-content: center;
  box-shadow: 0 0 10px 3px #ccc;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
}
.de-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: $nav-height;
  background-color: #fff;
  box-sizing: border-box;
  padding-left: 10px;
  padding-right: 10px;
  border-bottom: 1px solid #eee;
}
.de-modal__content {
  pointer-events: all;
}
.de-modal__body {
  background-color: #fff;
  padding: 10px;
  //box-shadow: 0 0 10px 3px #ccc;
  height: calc(100% - #{$nav-height});
}
.de-modal__close {
  font-size: 24px;
}
.de-modal--opened {
  z-index: 1003;
  opacity: 1;
}
.de-modal {
  $c: #e3e3e3;
  .vdr {
    border-color: $c;
    //opacity: 0;
  }
  .handle {
    border-color: $c;
    //opacity: 0;
  }
  //.vdr-container.active:hover {
  //  border-color: $c;
  //}
  //.vdr-handle:hover  {
  //  border-color: $c;
  //}
}
</style>

<template>
  <div class="de-modal" :class="{'de-modal--opened': opened}">
    <vue-draggable-resizable  :w="w"
                              :h="h"
                              :x="pos.x" :y="pos.y"
                              class="de-modal__content"
                              :drag-handle="'.de-modal__header'">
      <div class="de-modal__header">
        <div class="de-modal__drag">&nbsp;</div>
        <div><i class="fa fa-times-circle de-modal__close" @click="close"></i></div>
      </div>
      <div class="de-modal__body">
        <slot></slot>
      </div>
    </vue-draggable-resizable>
  </div>
</template>

<script>
import Vue3DraggableResizable from 'vue3-draggable-resizable'
export default {
  name: 'DeModal',
  props: {
    name: String
  },
  components: {
    Vue3DraggableResizable
  },
  data() {
    return {
      id: 'de-modal__' + ZY.rid(),
      w: 800,
      h: 440,
      pos: {x: undefined, y: undefined},
      opened: false
    }
  },
  methods: {
    close() {
      this.opened = false;
    },
    show(pos = {}) {
      this.pos = pos;
      this.opened = true;
    }
  },
  watch: {
    opened(newVal) {
      if (newVal) {
        document.body.style.overflow = 'hidden'
      } else {
        document.body.style.overflow = null
      }
    }
  },
  inject: ['formPage'],
  created() {
    if (this.formPage) {
      // console.log('formPage', this.name)
      this.formPage.registerCom(this.name, this)
    }
  }
}
</script>
